<template>
  <aside class="app-sidebar">
    <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        router
        background-color="#1E6BC3"
        text-color="#fff"
        active-text-color="#FDDB78"
        @open="handleOpen"
        @close="handleClose"
    >
      <template v-for="(menu, index) in menuList" :key="index">
        <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.index">
          <template #title>
            <el-icon>
              <component :is="menu.icon" />
            </el-icon>
            <span>{{ menu.label }}</span>
          </template>
          <el-menu-item v-for="(subMenu, subIndex) in menu.children" :key="subIndex" :index="subMenu.index">
            <el-icon>
              <component :is="subMenu.icon" />
            </el-icon>
            <span>{{ subMenu.label }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="menu.index">
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <span>{{ menu.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </aside>
</template>

<script setup>
import { ref } from 'vue'
import {
  Monitor,
  Document,
  Setting,
  Aim,
  User,
  Message,
  Folder,
  Pointer,
  PieChart, // 替换 BarChart
  Tools // 替换 Gear
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const activeMenu = ref(route.path)


const menuList = [
  {
    index: '1',
    label: '工作台',
    icon: Monitor,
    children: [
    ]
  },
  {
    index: '2',
    label: '签约管理',
    icon: Document,
    children: [
      { index: '2-1', label: '待处理签约', icon: Document },
      { index: '2-2', label: '续约记录', icon: Document }
    ]
  },
  {
    index: '3',
    label: '服务管理',
    icon: Pointer,
    children: [
      { index: '3-1', label: '待处理服务', icon: Pointer },
      { index: '3-2', label: '服务记录', icon: Pointer },
    ]
  },
  {
    index: '4',
    label: '居民管理',
    icon: User,
    children: [
    ]
  },
  {
    index: '5',
    label: '消息管理',
    icon: Message,
    children: [
    ]
  },
  {
    index: '6',
    label: '资料管理',
    icon: Folder,
    children: [
      { index: '6-1', label: '机构管理', icon: Folder },
      { index: '6-2', label: '团队管理', icon: Folder },
      { index: '6-3', label: '医生管理', icon: Folder },
      { index: '6-4', label: '服务包管理', icon: Folder },
      { index: '6-5', label: '服务项目管理', icon: Folder },
      { index: '6-6', label: '业绩目标管理', icon: Folder }
    ]
  },
  {
    index: '7',
    label: '数据统计',
    icon: PieChart,
    children: [
      { index: '7-1', label: '数据概况', icon: PieChart },
      { index: '7-2', label: '签约业绩统计', icon: PieChart },
      { index: '7-3', label: '服务业绩统计', icon: PieChart },
      { index: '7-4', label: '居民健康异常统计', icon: PieChart },
      { index: '7-5', label: '居民标签统计', icon: PieChart },
      { index: '7-6', label: '居民年龄统计', icon: PieChart },
      { index: '7-7', label: '居民学历统计', icon: PieChart },
      { index: '7-8', label: '居民性别统计', icon: PieChart }
    ]
  },
  {
    index: '8',
    label: '系统设置',
    icon: Tools,
    children: [
      { index: '8-1', label: '标签管理', icon: Tools },
      { index: '8-2', label: '角色管理', icon: Tools },
      { index: '8-3', label: '资讯管理', icon: Tools },
      { index: '8-4', label: '药品管理', icon: Tools },
      { index: '8-5', label: '轮播图管理', icon: Tools },
      { index: '/main/system/systemAnnouncement', label: '系统公告', icon: Tools },
      { index: '8-7', label: '协议管理', icon: Tools },
      { index: '8-8', label: '操作日志', icon: Tools }
    ]
  },
  {
    index: '9',
    label: '居民地图',
    icon: Aim
  }
]


const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}

const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.app-sidebar {
  width: 220px;
  height: calc(100vh - 60px);
  background-color: #2984F8;
  overflow: auto;
}

.el-menu-vertical {
  border-right: none;
}

.el-sub-menu__title,
.el-menu-item {
  height: 50px !important;
  line-height: 50px !important;
}
</style>